<template>
  <div class="clockSetting">
    <!--增加自适应图片比例-->
    <el-image
      class="picture"
      :src="clockPic ? 'data:image/png;base64,' + clockPic : ''"
      :preview-src-list="clockPic ? ['data:image/png;base64,' + clockPic] : []"
      fit="contain"
    >
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <el-scrollbar class="clockParameter">
      <el-form
        ref="form"
        :disabled="disabled"
        :model="formData"
        label-width="82px"
        label-position="top"
        label-suffix="："
        :rules="formRules"
      >
        <formField
          v-for="item in realFormFields"
          :key="item.symbol"
          :item="item"
          :form-data="formData"
          @change="getRealFormFields"
        />
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
import { dependencyRuleCheck } from '@/api/rule-management'
import formField from './formField.vue'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
export default {
  components: { formField },
  props: {
    chipId: {
      type: Number,
      default: undefined
    },
    clockPic: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: true
    },
    isCheck: {
      type: Boolean,
      default: true
    },
    formFields: {
      type: Array,
      default: () => {
        return []
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formRules: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      realFormFields: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      dependencyRuleCheckRequestId: generateUUID()
    }
  },
  mounted() {
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.dependencyRuleCheckRequestId) {
        let res = e.data.response
        if (res.success) {
          self.realFormFields = self.formFields.map((item) => {
            return {
              ...item,
              show: res.data.matchConditionKeyList.includes(item.symbol)
            }
          })
        } else {
          // self.realFormFields = []
          self.$message.error(res.message)
        }
      }
    },
    getRealFormFields() {
      this.$refs.form.validate()
      if (this.isCheck) {
        if (defaultSettings.isWPF || defaultSettings.isCEF) {
          this.dependencyRuleCheckRequestId = generateUUID()
          let message = {
            RequestUrl: process.env.VUE_APP_URL + '/project/dependencyRuleCheck',
            RequestMethod: 'POST',
            Headers: {
              contentType: 'application/json'
            },
            QueryParameter: {},
            RequestBody: {
              chipId: this.chipId,
              ruleSetType: 4,
              parameterData: this.formData
            },
            WebInfo: {
              requestId: this.dependencyRuleCheckRequestId
            }
          }
          postMessage(message)
        } else {
          dependencyRuleCheck({
            chipId: this.chipId,
            ruleSetType: 4,
            parameterData: this.formData
          }).then((res) => {
            this.realFormFields = this.formFields.map((item) => {
              return {
                ...item,
                show: res.data.matchConditionKeyList.includes(item.symbol)
              }
            })
          })
          // .catch(() => {
          //   this.realFormFields = []
          // })
        }
      } else {
        this.realFormFields = this.formFields.map((item) => {
          return {
            ...item,
            show: true
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
.clockSetting {
  display: flex;
  height: 466px;
  .picture {
    width: 749px;
    height: 100%;
    border: 1px solid #ddd;
    padding: 10px;
  }
  .clockParameter {
    height: 100%;
    flex: 1;
    position: relative;
    left: 30px;
    padding-right: 40px;
    .el-form {
      padding-right: 10px;
    }
  }
}
</style>
